<template>
  <div class="teacher-mine-title">我的</div>

  <el-divider
  style="margin: 0; border-width: 1px;"
  ></el-divider>

  <div class="teacher-mine">
    <el-container class="personal-info">
      <div class="teacher-mine-profile">
        <el-row class="user-profile">
          <el-col :span="8">
            <img style="width: 100px; height: 100px;" src="@/assets/logo2.png"></img>
          </el-col>
          <el-col :span="16">
            <p>{{ userName }}</p>
            <p>{{ userClass }}</p>
            <p>{{ userSchool }}</p>
          </el-col>
        </el-row>
      </div>
    </el-container>

    <el-divider
    style="margin: 0 0 6% 0;"
    ></el-divider>

    <el-divider
    style="margin: 0;"></el-divider>
    <div class="teacher-mine-button" @click="click1">
      <div class="teacher-mine-item">待办事项</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
    style="margin: 0;"></el-divider>
    <div class="teacher-mine-button" @click="click1">
      <div class="teacher-mine-item">我的班级</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
    style="margin: 0;"></el-divider>
    <div class="teacher-mine-button" @click="click2">
      <div class="teacher-mine-item">我的工作</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
    style="margin: 0;"></el-divider>
    <div class="teacher-mine-button" @click="click3">
      <div class="teacher-mine-item">帮助</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
    style="margin: 0;"></el-divider>
    <div class="teacher-mine-button" @click="click4">
      <div class="teacher-mine-item">设置</div>
      <div> <el-icon style="width: 20px; height: 24px;"><ArrowRight /></el-icon> </div>
    </div>
    <el-divider
    style="margin: 0;"></el-divider>
    <div style="display: flex; justify-content: center;">
      <Sidebar />
    </div>
    <el-button
    class="teacher-mine-quit"
    type="danger"
    @click="quit">
      <div class="teacher-mine-item">退出登录</div>
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Sidebar from '@/components/Sidebar.vue'
import router from '@/router';

const profileImage = '../../assets/logo.png';
const userName = ref('孙笑川');
const userClass = ref('讲师')
const userSchool = ref('天津工业大学');

const quit = () => {
  router.push('\login')
}

const click1 = () => {
  router.push('\my_class')
}
</script>

<style scoped>
.teacher-mine-title {
  font-size: 21px;
  padding: 2% 0;
}

.teacher-mine {
  height: 92%;
  background-color: #f5f6f8;
}
.personal-info {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.teacher-mine-profile {
  width: 90%;
  border-radius: 20px;
  margin: 5% auto 3% auto;
}

.user-profile .el-avatar {
  margin: 20px;
}

.teacher-mine-button {
  width: 100%;
  height: 5%;
  display: flex;
  padding: 1% 0;
  background-color: white;
  justify-content: space-between;
  align-items: center;
}

.teacher-mine-button .teacher-mine-item {
  margin-left: 5%;
  font-size: 20px;
}

.teacher-mine-quit {
  margin-top: 5%;
  width: 80%;
  height: 5%;
  padding: 1% 0;
  border-radius: 9px;
}
</style>
